{include file="common/header-top" /}

<link rel="stylesheet" href="/__FRONT__/css/job-index.css?_2019">
<style type="text/css">
    .locationCity{
        font-size: 15px;
    }

    .hot-job-kind a{
        text-decoration:none;
        out-line: none;
        color: #0C0C0C;
    }
    .hot-job-kind span{
        display: block;
        font-size: 12px;
        text-align: center;
    }

</style>

<div id='app' v-cloak>

    <van-notice-bar
            :scrollable="true"
            mode="closeable"
            left-icon="volume-o"
            v-show="showNotify"
            @click="clickNotify"
            :text="publicNotice.title"
    >
    </van-notice-bar>

    <!-- 搜索栏 start -->
    <van-row>
        <van-col span="5">
            <div style="padding-top: 20%;;padding-left: 7%;">
                <van-icon name="location" @click="selectCity" />
                <span class="locationCity" @click="selectCity" style="padding-left: 1px;">{{locationCity.areaName}}</span>
            </div>
        </van-col>

        <van-col span="19">
            <van-search
                    v-model="searchValue"
                    placeholder="请输入需要查找的兼职"
                    show-action
                    shape="round"
                    @search="clickSearch"
            >
                <van-button round slot="action" type="primary" size="small" @click="clickSearch">搜索</van-button>
            </van-search>
        </van-col>
    </van-row>
    <!-- 搜索栏 end -->

    <!--轮播-->
    <van-swipe :autoplay="3000" indicator-color="white" :height="180">
        <van-swipe-item v-for="(item, index) in topBanner" :key="index" @click="swipeClick(item)">
            <van-image :src="item.logo" v-lazy="item.logo" :lazy-load="false"/>
        </van-swipe-item>
    </van-swipe>
    <!--轮播-->

    <!--热门兼职类别-->
    <van-grid :column-num="5"  :border="false">
        <van-grid-item  v-for="item in jobTypeList"
                        :icon="item.img"
                        :text="item.name"
                        :url="hotJobUrl(item)"
        />
    </van-grid>
    <!--热门兼职类别-->


    <!--充值活动-->
    <van-image
            v-if="chargeActive.id"
            :src="chargeActive.cover"
            v-lazy="chargeActive.cover"
            :lazy-load="false"
            @click="goCharge"
    ></van-image>
    <!--充值活动-->

    <!--adv1-->
    <van-swipe :autoplay="3000" indicator-color="white" :height="100" v-else-if="adv1.length">
        <van-swipe-item v-for="(item, index) in adv1" :key="index" @click="swipeClick(item)" v-if="adv1.length">
            <van-image :src="item.logo" v-lazy="item.logo" :lazy-load="false"/>
        </van-swipe-item>
    </van-swipe>

    <block v-else></block>
    <!--adv1-->




    <!--兼职列表 start -->
    <van-notice-bar
            :scrollable="false"
            background="#ebf9ff"
            color="#000000"
            left-icon="arrow-down"
            style="border-radius: 10px;"
    >
        <span>最新兼职</span>
    </van-notice-bar>
    <van-row v-for="item in listJob" class="job-item">
        <a :href="'/index/Jobs/jobDetail?id=' + item.id" class="job-item-a">
            <van-col span="5">
                <van-icon :name="item.jobTypeImg" class="job-item-img-icon" size="45px"></van-icon>
            </van-col>

            <van-col span="11">
                <h4 class="job-item-title">
                    <div class="van-ellipsis">{{item.title}}</div>
                </h4>
                <van-cell
                        icon="/__FRONT__/images/icon/publish-job-address.png"
                        :title="item.address"
                >
                </van-cell>
                <van-cell
                        icon="/__FRONT__/images/icon/publish-job-time.png"
                        :title="item.work_timeCh"
                ></van-cell>
                <van-cell
                    icon="/__FRONT__/images/icon/publish-job-money.png"
                >
                    <span class="job-item-span" slot="title">
                        <span class="money-font">{{item.settlement_typeCh}}</span>
                    </span>
                </van-cell>

            </van-col>

            <van-col span="8">
                <van-tag round type="warning" style="float:right;margin-top: 5px;" v-if="item.is_top">置&nbsp;&nbsp;&nbsp;顶</van-tag>
                <van-tag round type="warning" style="float:right;margin-top: 5px;" v-if="item.is_recommend && !item.is_top">推&nbsp;&nbsp;&nbsp;荐</van-tag>
                <div class="van-ellipsis job-item-money-div">
                    <span class="money-font job-item-money-font">{{item.salary}}</span>
                    <span class="job-item-span-unit">{{item.salary_unitCh}}</span>
                </div>
            </van-col>
        </a>
    </van-row>
    <!--兼职列表 end -->


    <!--adv2-->
    <van-swipe :autoplay="3000" indicator-color="white" :height="100" v-if="adv2.length">
        <van-swipe-item v-for="(item, index) in adv2" :key="index" @click="swipeClick(item)">
            <van-image :src="item.logo" v-lazy="item.logo" :lazy-load="false"/>
        </van-swipe-item>
    </van-swipe>
    <!--adv2-->




    <!--二手商品列表 start -->
    <van-notice-bar
            :scrollable="false"
            background="#ebf9ff"
            color="#000000"
            left-icon="arrow-down"
            style="border-radius: 10px;"
    >
        <span>最新二手商品</span>
    </van-notice-bar>
    <van-row v-for="item in listMarket" class="job-item">
        <van-card
                :num="item.number"
                :title="item.name"
                :thumb="item.logo"
                :price="item.money"
                :origin-price="item.oprice"
                @click="goGoodsDetail(item)"
        >
            <div slot="tags">
                <van-tag type="success">{{item.marketTypeName}}</van-tag>
            </div>
            <div slot="footer">
                <van-button size="small">联系卖家</van-button>
            </div>
        </van-card>
    </van-row>
    <!--二手商品列表 end -->











    <!--选择城市 start-->
    <van-popup
            v-model="selectCityShow"
            position="bottom"
            :style="{ height: '40%' }"
    >
        <van-area
                :area-list="openAreaList"
                :columns-num="2"
                @cancel="selectCityShow = false"
                @confirm="selectCityConfirm"
        ></van-area>

    </van-popup>
    <!--选择城市 end-->



    {include file="common/foot-bar" /}

</div>


<script src="/__FRONT__/plugs/wechatJsSDK/jweixin-1.4.0.js"></script>
<script>
    Vue.use(vant.Lazyload);
    var vm = new Vue({
        //挂载点
        el: '#app',
        //数据集合
        data() {
            return {
                value: 3,
                active:0,
                userCenterIcon: {
                    normal: '/__FRONT__/images/icon/usercenter-n.png',
                    active: '/__FRONT__/images/icon/usercenter-a.png'
                },
                erShouIcon: {
                    normal: '/__FRONT__/images/icon/ershou-n.png',
                    active: '/__FRONT__/images/icon/ershou-a.png'
                },

                inWechat: {$inWechat},

                //顶部通知栏
                showNotify:false,
                publicNotice: '',
                searchValue: '',

                //系统中开放的地区
                openAreaList:[],
                locationCity: {
                    areaName: '全国',
                    areaValue: '',
                },
                selectCityShow: false,

                //顶部banner
                topBanner: [],
                //兼职岗位
                jobTypeList: [],

                //兼职列表集
                listJob: [],
                listJobPage: 1,
                listJobPageSize: 5,

                //二手列表
                listMarket: [],
                listMarketPage: 1,
                listMarketPageSize: 5,

                //广告
                adv1:[],
                adv2:[],
                adv3:[],
                adv4:[],
                adv5:[],

                //充值活动
                chargeActive: {
                    id: 0,
                },

            }
        },

        //创建时执行 操作
        created : function (){
            //获取当前定位城市
            if (this.inWechat) {
                this.getWechatLocation();
            }

            //获取兼职类型列表
            axiosRequest.get('/api/job/jobType', {params:{limit:5}}).then(function (response) {
                if (response.code == 200) {
                    vm.$data.jobTypeList = response.data;
                }
            });

            //首页接口数据
            axiosRequest.get('/api/index/index').then(function (response) {
                if (response.code == 200) {
                    vm.$data.topBanner = response.data.swipeList;
                    if (response.data.publicNotice) {
                        vm.$data.showNotify = true;
                        vm.$data.publicNotice = response.data.publicNotice;
                    }
                    //充值活动
                    if (response.data.chargeActive) {
                        vm.$data.chargeActive = response.data.chargeActive;
                    }
                    //首页广告处理
                    if (response.data.advList) {
                        //广告位1：
                        vm.$data.adv1 = response.data.advList.adv1;
                        vm.$data.adv2 = response.data.advList.adv2;
                        vm.$data.adv3 = response.data.advList.adv3;
                        vm.$data.adv4 = response.data.advList.adv4;
                        vm.$data.adv5 = response.data.advList.adv5;

                    }
                } else {
                    vant.Notify({ type: 'danger', message: response.msg });
                }
            });

            //获取首页展示兼职
            this.getListJob();
            //获取首页展示二手
            this.getListMarket();

            //获取系统中开放的地区
            axiosRequest.get('/api/common/openArea').then(function (response) {
                if (response.code == 200) {
                    vm.$data.openAreaList = response.data;
                }
            });


        },

        computed:{
        },


        //方法集合 在 `methods` 对象中定义方法
        methods: {

            //热门兼职列表
            hotJobUrl(item){
                return '/index/jobs/index?jobType=' + item.id;
            },

            //点击通知栏
            clickNotify(){
                if (this.publicNotice.url) {
                    window.location.href = this.publicNotice.url;
                    return true;
                }
                if (this.publicNotice) {
                    window.location.href = '/index/News/newsDetail?id=' + this.publicNotice.id;
                    return true;
                }
            },

            //充值活动点击
            goCharge(){
                window.location.href = '/index/Userwallet/buyBeanByActive?id=' + this.chargeActive.id;
            },

            //轮播点击
            swipeClick(item){
                if (item.linkurl) {
                    window.location.href = item.linkurl;
                }
            },

            //选择城市
            selectCity() {
                this.selectCityShow = true;
            },
            selectCityConfirm(item) {
                this.locationCity.areaName = item[1].name;
                this.locationCity.areaValue = '';
                item.forEach(function(one){
                    vm.$data.locationCity.areaValue += one.name + '|';
                });
                this.selectCityShow = false;

                this.clearJobList();
                this.getListJob();
            },

            goGoodsDetail(item){
                window.location.href = '/index/Market/goodsDetail?id=' + item.id;
            },


            //搜索兼职
            clickSearch() {
                if (this.searchValue) {
                    var searchValue = this.searchValue;
                    var city = this.locationCity.areaName;
                    window.location.href = '/index/index/searchJob?city=' + city + '&searchValue=' + searchValue;
                } else {
                    vant.Toast.fail('请输入需要搜索的内容！');
                }
                return false;
            },




            //清除兼职列表
            clearJobList(){
                this.listJob = [];
                this.listJobPage = 1;
                this.listJobPageSize = 6;

                this.listMarket = [];
                this.listMarketPage = 1;
                this.listMarketPageSize = 6;
            },


            //获取兼职列表
            getListJob() {
                var params = {
                    page: this.listJobPage,
                    pageSize: this.listJobPageSize,
                    areaValue: this.locationCity.areaValue,
                    //isTop: 1,
                    //isRecommend: 1
                };
                axiosRequest.get('/api/job/listJob',{params:params}).then(function (response) {
                    if (response.code == 200) {
                        if (response.data.jobList) {
                            response.data.jobList.forEach(function(item){
                                vm.$data.listJob.push(item)
                            });
                        } else {
                            vant.Toast('没有更多啦！');
                        }
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            },


            //获取二手列表
            getListMarket(){
                var params = {
                    page: this.listMarketPage,
                    pageSize: this.listMarketPageSize,
                    areaValue: this.locationCity.areaValue,
                    is_show: 1
                };
                axiosRequest.get('/api/market/goodsList',{params:params}).then(function (response) {
                    if (response.code == 200) {
                        if (response.data.goodsList) {
                            response.data.goodsList.forEach(function(item){
                                vm.$data.listMarket.push(item)
                            });
                        } else {
                        }
                    } else {
                        vant.Toast('系统开小差啦！');
                    }
                });
            },

            getWechatLocation(){
                //微信js SDK 配置
                wx.config({
                    debug: false,
                    appId: '{$wechatJsSDK.appId|default=""}',
                    timestamp: '{$wechatJsSDK.timestamp|default=""}',
                    nonceStr: '{$wechatJsSDK.nonceStr|default=""}',
                    signature: '{$wechatJsSDK.signature|default=""}',
                    jsApiList: [
                        'getLocation',
                    ]
                });
                wx.ready(function () {
                    wx.getLocation({
                        type: 'wgs84',
                        success: function (res) {
                            var postData = {
                                latitude: res.latitude,
                                longitude: res.longitude
                            };
                            axiosRequest.post('/api/common/transLocation', postData).then(function (response) {
                                if (response.code == 200) {
                                    vm.$data.locationCity.areaName = response.data.cityName;
                                    vm.$data.locationCity.areaValue = response.data.areaValue;
                                    vm.clearJobList();
                                    vm.getListJob();
                                } else {
                                    vant.Notify({type:'danger', message:response.msg});
                                }
                            });

                        },
                        cancel: function (res) {
                            vant.Notify({ type: 'danger', message: '您拒绝授权获取地理位置!'});
                        }
                    });
                });
                //初始化jsapi接口 状态
                wx.error(function (res) {
                    vant.Notify({ type: 'danger', message: '当前客户端版本不支持微信SDK!'});
                });
            },

        }

    });
</script>


{include file="common/foot-bottom" /}
